import React from 'react';
import PropTypes from 'prop-types';
import {Card, Table} from 'antd';
import {TABLE, DATETIME_FORMAT} from '../constants';
import {formatDateTime, conventEnumValueToString, formatAmount} from '../utils';
import {laborType} from '../Enum';
import styles from './style.css';
import {formatMessage} from './intl';
// eslint-disable-next-line react/prefer-stateless-function
class ExpandedRowTablePanel extends React.PureComponent {
    render() {
        const columns = [
            {
                title: formatMessage({
                    id: 'expandedRowTable.column.vin',
                    defaultMessage: 'VIN'
                }),
                sorter: true,
                dataIndex: 'vin'
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.engineCode',
                    defaultMessage: '发动机号'
                }),
                dataIndex: 'engineCode'
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.saleDate',
                    defaultMessage: '实销日期'
                }),
                dataIndex: 'saleDate',
                sorter: true,
                render: text => formatDateTime(text, DATETIME_FORMAT)
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.mileage',
                    defaultMessage: '行驶里程(KM)'
                }),
                dataIndex: 'mileage'
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.labourType',
                    defaultMessage: '工时类型'
                }),
                dataIndex: 'labourType',
                sorter: true,
                render: text => conventEnumValueToString(laborType, text)
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.materialFee',
                    defaultMessage: '材料费'
                }),
                dataIndex: 'materialFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.mgmtFee',
                    defaultMessage: '管理费'
                }),
                dataIndex: 'mgmtFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.assistantFee',
                    defaultMessage: '辅料费'
                }),
                dataIndex: 'assistantFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            }, {
                title: formatMessage({
                    id: 'expandedRowTable.column.totalFee',
                    defaultMessage: '总金额'
                }),
                dataIndex: 'totalFee',
                className: styles.textAlign,
                render: text => formatAmount(text)
            }
        ];
        return (
            <Card>
                <Table
                    className="white-space-nowrap"
                    rowKey="id"
                    dataSource={this.props.data}
                    columns={columns}
                    pagination={false}
                    {...TABLE}/>
            </Card>
        );
    }
}
ExpandedRowTablePanel.propTypes = {
    data: PropTypes.array,
};
export default ExpandedRowTablePanel;
